<template>
    <div>
        <!-- 列表 -->
        <div class="bigContentWrap">
            <div class="searchList">
                <el-form :inline="true" :model="formQuery" class="demo-form-inline header-form">
                    <el-form-item label="关键字:">
                        <el-input v-model="formQuery.names" placeholder="请输入账套名称关键字"></el-input>
                    </el-form-item>
                    <el-form-item label="账套类型:" >
                        <el-select clearable v-model="formQuery.types">
                            <el-option
                                label="---请选择---"
                                :value=null></el-option>
                            <el-option
                                v-for="item in  $dictUtils.getDictList('bookType')"
                                :key="item.value"
                                :label="item.label"
                                :value="Number(item.value)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px;">
                        <el-button type="primary" @click="getList"  size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 按钮 -->
            <el-table
                size="mini"
                :data="tableData"
                style="width: 100%"
                row-key="id"
                border
                :header-cell-style="{
          'background-color': '#eeeeee !important',
        }"
                :row-class-name="tableRowClassName"
                :default-sort = "{prop: 'label', order: 'descending'}"
            >
                <el-table-column type="index" width="70" label="序号" align="center"> </el-table-column>
                <el-table-column prop="names" label="账套名称" align="center"></el-table-column>
                <el-table-column  label="账套类型">
                    <template slot-scope="scope">
                        {{$dictUtils.getDictLabel("bookType", scope.row.types, "")}}
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="96">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="authorize(scope.row)">授权</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 弹窗, 新增 / 修改 -->
            <!-- 自定义表头 -->

            <el-pagination
                background
                @size-change="sizeChangeHandle"
                @current-change="handleCurrentChange"
                :current-page.sync="formQuery.pageNo"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="formQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="formQuery.total"
            >
            </el-pagination>
        </div>
        <authorizeForm ref="authorizeForm" @refreshDataList="getList"></authorizeForm>
    </div>
</template>

<script>

import {getTenantBookList} from '@/api/tenant/tenant.js'
import authorizeForm from './authorizeForm'
export default {
    data () {
        return {
            title: '',
            dialogFormVisible: false,
            tenantId: '',
            tableData: [],
            formQuery: {
                names: '',
                types: '',
                pageNo: 1,
                pageSize: 10,
                total: 1
            }
        }
    },
    components: {
        authorizeForm
    },
    activated () {
        this.getList()
    },
    methods: {
        // 获取列表
        getList () {
            getTenantBookList(this.formQuery).then(res => {
                console.log(res.data)
                if (res.data.code === 200) {
                    this.tableData = res.data.page.list
                    this.formQuery.total = res.data.page.count
                }
            })
        },
        authorize (row) {
            this.$store.commit('tentant/setBookAuthorDTO', row)
            this.$refs.authorizeForm.init(row)
        },
        // 新
        handleCurrentChange (val) {
            console.log(`当前页: ${val}`)
            this.formQuery.pageNo = val
            this.getList()
        },
        // 每页数
        sizeChangeHandle (val) {
            this.formQuery.pageSize = val
            this.formQuery.pageNo = 1
            this.getList()
        },
        tableRowClassName ({ row, rowIndex }) {
            if (rowIndex % 2 === 1) {
                return 'warning-row'
            } else {
                return 'success-row'
            }
        }

    }
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
::v-deep .el-table .warning-row {
    background: #f7f7f7;
}
.from-container {
    margin-bottom: 10px;
}

.el-table .success-row {
    background: #f0f9eb;
}
::v-deep .el-table__column-filter-trigger{
    position: absolute;
    right: 15px;
}
.addBtn{
    margin: 20px 0;
}
</style>
